<template>
  <div style="height: 100%;">
    <el-container class="home-container">
      <!-- 头部区域 -->
      <el-header>
        <div class="logo-box">
          <img src="../../assets/logo.png" alt>
          <span>春天医药EDC报表系统</span>
        </div>
        <div id="tp-weather-widget" style="position: absolute; right: 310px;"></div>
        <div class="user-box">
          <!-- <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              欢迎！
              {{ls_username}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span> -->
            <!-- <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>修改密码</el-dropdown-item>
            </el-dropdown-menu> -->
          <!-- </el-dropdown> -->
        </div>
        <el-button type="info" @click="logout">退出</el-button>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse ? '65px' : '200px'">
          <el-scrollbar style="height:100%;">
            <el-row class="tac">
              <el-col>
                <el-menu
                  default-active="1"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose"
                  @select="handleselect"
                  :collapse="isCollapse"
                  :collapse-transition="true"
                  background-color="#545c64"
                  text-color="#fff"
                  active-text-color="#ffd04b"
                  style="border-right:none;"
                >

                    <el-menu-item index="/tyy/overview">访视状态总览</el-menu-item>
                    <el-menu-item index="/tyy/visitfill">访视填写总览</el-menu-item>
                    <el-menu-item index="/tyy/query">质疑状态总览</el-menu-item>
                    <el-menu-item index="/tyy/superwindow">访视超窗列表</el-menu-item>
                    <el-menu-item index="/tyy/interviewnotfill">访视未填写完成</el-menu-item>
                    <el-menu-item index="/tyy/interviewsdv">访视SDV状态</el-menu-item>
                    <el-menu-item index="/tyy/crfnotfiled">CRF未提交</el-menu-item>
                    <el-menu-item index="/tyy/crfsvdnot">CRF-SDV未完成</el-menu-item>
                    <el-menu-item index="/tyy/interviewquerynot">访视质疑未关闭完毕</el-menu-item>
                    <el-menu-item index="/tyy/crfnotgather">CRF未采集</el-menu-item>
                    <el-menu-item index="/tyy/crfquerynot">质疑列表</el-menu-item>
                    <el-menu-item index="/tyy/querycollect">按质疑状态汇总</el-menu-item>
                    <el-menu-item index="/tyy/pdcollect">按PD汇总</el-menu-item>
                    <el-menu-item index="/tyy/morequerycollect">按再质疑数汇总</el-menu-item>
                </el-menu>
              </el-col>
            </el-row>
          </el-scrollbar>
        </el-aside>

        <!-- 右侧边栏 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <!-- 修改密码弹窗配置 -->
    <el-dialog title="修改密码" width="400px" :visible.sync="dialogFormVisible" @close="empty">
      <el-form :model="form" :rules="PasswordFormRules" ref="Modify_password">
        <el-form-item prop="oldpassword" label="旧密码" :label-width="formLabelWidth">
          <el-input
            disabled
            :value="ls_password"
            autocomplete="off"
            onkeyup="this.value=this.value.replace(/\s+/g,'')"
          ></el-input>
        </el-form-item>
        <el-form-item prop="newpassword" label="新密码" :label-width="formLabelWidth">
          <el-input
            v-model="form.newpassword"
            autocomplete="off"
            onkeyup="this.value=this.value.replace(/\s+/g,'')"
          ></el-input>
        </el-form-item>
        <el-form-item prop="confirm_password" label="确认密码" :label-width="formLabelWidth">
          <el-input
            v-model="form.confirm_password"
            autocomplete="off"
            onkeyup="this.value=this.value.replace(/\s+/g,'')"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入 mixins 中的 行为
import mix from "./Home-mixins.js";
export default {
  // 通过 mixins 把外界导入过来的行为,混入到 当前组件中
  mixins: [mix]
};
</script>

<style lang="less" scoped>
@ceshi: #76c3bb;
.home-container {
  height: 100%;
  .el-header {
    position: relative;
    background-color: @ceshi;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    padding-right: 20px;
    .logo-box {
      display: flex;
      color: white;
      font-size: 22px;
      align-items: center;
      // 禁止被用户选中
      user-select: none;
      img {
        width: 108px;
        height: 55px;
        margin-right: 50px;
        padding-left: 44px;
      }
    }
    .user-box {
      position: absolute;
      right: 110px;
      display: flex;
      color: white;
      font-size: 16px;
      align-items: center;
      // 禁止被用户选中
      user-select: none;
      p {
        width: 28px;
        height: 28px;
        // margin-right: 50px;
        // padding-left: 44px;
        border-radius: 50%;
        border: 1px solid #fff;
        background-color: #fff;
        background-image: url("../../assets/logo.png");
        background-size: 100% 100%;
      }
      p {
        display: block;
        margin-right: 10px;
      }
    }
  }

  .el-aside {
    background-color: rgb(84, 92, 100);
    user-select: none;
  }

  .el-main {
    background-color: #eaedf1;
  }
}

.toggle_bar {
  color: #fff;
  font-size: 12px;
  text-align: center;
  line-height: 25px;
  background-color: #4a5064;
  user-select: none;
  cursor: pointer;
  letter-spacing: 0.1em;
}
.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
